<template>
  <view>
    <view style="padding: 20upx;">
      <!-- 卡片 -->
      <view v-for="(project,index) in projectArr" :key="index" class="card">
        <view style="padding: 20upx;display: flex;justify-content: space-between;align-items: center;">
          <view style="display: flex;align-items: center;">
            <!-- 头像 -->
            <view style="border-radius: 10upx;">
              <img :src="project.mainImageUrl" style="height: 170upx;width: 170upx;border-radius: 20upx;" />
            </view>
            <!-- 第二列 -->
            <view style="display: flex;justify-content: left;padding-left: 20upx;">
              <!-- 左边 -->
              <view style="width: 250upx;">
                <view style="display: flex;">
                  <view style="font-size: 37upx;">{{project.name}}</view>
                  <view style="font-size: 25upx; padding-left: 10upx;color: #B5BBBD;">{{project.serviceDuration + '分钟'}}</view>
                </view>
                <view style="padding-top: 30upx;">
                  <view style="color: red;font-size: 40upx;">{{'￥' + project.discountPrice}}</view>
                </view>
              </view>
            </view>
          </view>
          <!-- 右边加减 -->
          <view>
            <view>
              <view>
                <u-number-box v-model="project.number" @change="changeHandle($event,project.id)" min="0">
                  <view slot="minus" class="minus">
                    <u-icon name="minus" size="12"></u-icon>
                  </view>
                  <text slot="input" style="width: 20upx;text-align: center;" class="input">{{project.number}}</text>
                  <view slot="plus" class="plus">
                    <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                  </view>
                </u-number-box>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getProjectList
  } from '../../api/project.js'
  export default {
    onReady() {
      this.getProjectHandle()
    },
    data() {
      return {
        projectArr: [],
      }
    },
    methods: {
      getProjectHandle() {
        const that = this
        getProjectList().then(res => {
          that.projectArr = res.data
        })
      },
      changeHandle(val,id){
        this.projectArr.forEach(item => {
          if(item.id === id){
            item.number = val.value
          }
        })
        this.$emit('projectArrHandle',this.projectArr)
      }

    }
  }
</script>

<style scoped lang="scss">
  .card {
    border-style: solid;
    border-width: 2px;
    border-color: #F5F5F5;
    border-radius: 20upx;
    box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .2);
    margin-bottom: 30upx;
  }

  .minus {
    width: 70upx;
    height: 70upx;
    border-width: 1px;
    border-color: #E6E6E6;
    border-style: solid;
    border-radius: 20upx;
    @include flex;
    justify-content: center;
    align-items: center;
  }

  .input {
    padding: 0 10px;
  }

  .plus {
    width: 70upx;
    height: 70upx;
    background: linear-gradient(to right, #119FAF, #41C69E);
    border-radius: 20upx;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }
</style>
